<template>
  <a-modal
    v-model:visible="visible"
    title="绑定的项目名称"
    centered
    style="width: 600px"
  >
    <div class="container">
      <!-- {{ viewDetail }} -->
      <a-table
        :pagination="false"
        :dataSource="viewDetail"
        :columns="columns"
        :bordered="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'logo'">
            <img :src="record.logo" alt="" />
          </template>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script setup>
import {
  reactive,
  toRefs,
  watch,
  defineComponent,
  computed,
  onMounted,
  ref,
} from "vue";
import request from "@/common/utils/request";
import utils from "@/common/utils/utils.js";
const visible = ref(false);
const showModal = (info) => {
  getLibrary(info.id);
  visible.value = true;
};
const cancel = () => {
  visible.value = false;
};
const viewDetail = ref(null);
// 获取表单详情
const getLibrary = (id) => {
  if (id) {
    request
      .get("/work_ai", "/user/shotstack/associ_poi/library/list", {
        associ_poi_id: id, //门店id
      })
      .then((res) => {
        if (res) {
          console.log(res);
          viewDetail.value = res.result;
          console.log(viewDetail.value, "viewDetail.value");
        }
      })
      .catch((err) => {})
      .finally(() => {});
  }
};
const columns = [
  {
    title: "项目名称",
    dataIndex: "name",
    key: "name",
    width: 300,
    align: "center",
  },
  {
    title: "项目logo",
    dataIndex: "logo",
    key: "logo",
    width: 300,
    align: "center",
  },
];
defineExpose({
  showModal,
  cancel,
  columns,
});
</script>

<style lang="less" scoped>
.container {
  display: flex;
  justify-content: center;
  width: 100%;
}
img {
  width: 100px;
  height: 100px;
  object-fit: fill;
}
</style>
